<!--
 * @Descripttion:
 * @Author: hsg
 * @Date: 2020-11-27 15:55:01
 * @LastEditors: hsg
 * @LastEditTime: 2020-12-01 14:52:34
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>兑换商品</title>
    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="__ROOT__/Addons/IntegralShop/Public/css/index.css" />
    <link rel="stylesheet" href="__ROOT__/Addons/IntegralShop/Public/css/exchangeShop.css" />
</head>

<body>
    <div id="app">
        <div>
            <van-address-edit :area-list="areaList" show-postal :search-result="searchResult" :is-saving="saving"
                :area-columns-placeholder="['请选择', '请选择', '请选择']" @save="onSave" />
            <van-card num="1" :origin-price="goodDetail.price" :thumb="goodDetail.cover">
                <template #title>
                    <h3 class="van-multi-ellipsis--l2">{{goodDetail.name}}</h3>
                </template>
                <template #price>
                    <van-icon name="points" color="#faab0c" size="14px" /> <span style="color:#FDAE02;font-size: 14px;">
                        {{goodDetail.need_mark}}</span>
                </template>
            </van-card>
        </div>
        <div class="btn">
            <van-button type="default" @click="goBack" round block>返回</van-button>
        </div>
    </div>
</body>

<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<script src="__ROOT__/Addons/IntegralShop/Public/js/vue.min.js"></script>
<script src="__ROOT__/Addons/IntegralShop/Public/js/vant.min.js"></script>
<script src="__ROOT__/Addons/IntegralShop/Public/js/area.js"></script>
<script src="__ROOT__/Addons/IntegralShop/Public/js/axios.min.js"></script>
<script src="__ROOT__/Addons/IntegralShop/Public/js/qs.min.js"></script>

<script>

    axios.interceptors.request.use(config => {
        // config.url += '&openid=o1nqxs8hrplDUwjvz_uqK258T9s4'
        return config
    }, err => {
        return Promise.reject(err)
    })

    const that = new Vue({
        el: '#app',
        data() {
            return {
                value: 1,
                areaList: AreaList,
                show: false,
                saving: false,
                searchResult: [],
                goodDetail: {}
            }
        },
        created() {
            axios.get("{:create_mobile_url('api_good_detail')}", {
                params: {
                    good_id: this.getQueryVariable('good_id')
                }
            }).then(function (response) {
                    that.goodDetail = response.data.data.detail
                })
                .catch(function (error) {
                    console.log(error);
                });
        },
        methods: {
            onSave(data) {
                this.saving = true
                axios.post("{:create_mobile_url('api_add_order')}", Qs.stringify({
                    good_id: this.goodDetail.id,
                    address_code: data.postalCode,
                    address: `${data.province}${data.city}${data.county}${data.addressDetail}`,
                    phone: data.tel,
                    name: data.name
                })).then(function (response) {
                    if (response.data.code === 1) {
                        vant.Notify({ type: 'warning', message: response.data.msg });
                        that.saving = false;
                    } else {
                        vant.Notify({ type: 'success', message: '提交成功' });
                        setTimeout(() => {
                            window.location.href = "{: create_mobile_url('index') }&active=1"
                        }, 2000)
                    }
                })
                    .catch(function (error) {
                        console.log(error);
                    });

            },
            goBack() {
                vant.Dialog.confirm({
                    title: '确定返回吗',
                    message: '所录入信息将不被保存!',
                }).then(() => {
                    window.location.href = "{: create_mobile_url('index') }"
                }).catch(() => {
                    // on cancel
                });
            },
            getQueryVariable(variable) {
                let query = window.location.search.substring(1);
                let vars = query.split("&");
                for (let i = 0; i < vars.length; i++) {
                    let pair = vars[i].split("=");
                    if (pair[0] == variable) { return pair[1]; }
                }
                return (false);
            }
        }
    });


</script>

</html>
